<script setup lang="ts">
import {onMounted, ref} from "vue";
import {get_Notes_lists, Tag_list} from "@/api/index"
import {useRouter} from "vue-router";
import {usePage} from "@/plugins/pagination";
import * as echarts from 'echarts'
import "echarts-wordcloud";//引入词云
import {randomNumber, tagTypes} from "@/plugins/index.ts"

const router = useRouter();

let pagination = usePage();
let articleList = ref<any>([]);
let loading = ref<Boolean>(true)


const getList = () => {
  console.log(pagination)
  loading.value = true;
  get_Notes_lists(pagination).then((res: any) => {
    console.log(res, "获取列表")
    articleList.value = res.data.data;
    pagination.total = res.data.total;
  }).finally(() => loading.value = false)
}

const chatInit = (data: any) => {
  //加载词云图
  var myChart = echarts.init(document.getElementById('word_img'));
  // 温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
  myChart.setOption({
    tooltip: {
      show: false
    },
    series: [{
      type: 'wordCloud',
      gridSize: 8,
      sizeRange: [10, 38],
      rotationRange: [-75, 75],
      drawOutOfBound: false,
      // maskImage: maskImage,
      textStyle: {
        fontFamily: "sans-serif",
        fontWeight: "bold",
        color: function () {
          // Random color
          return "rgb(" +
              [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(",") +
              ")"
        },
      },
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      data: data
    }]
  })
}

onMounted(() => {
  getList()
  Tag_list().then((res: any) => {
    console.log(res, "获取标签")
    let data = res.data;
    chatInit(data.map(item => {
      return {
        name: item,
        value: Math.round(Math.random() * 10)
      }
    }))
  })
})
</script>

<template>
  <div class="ArticleContent">
    <div class="ArticleLeft">
      <div class="ArticleList">
        <div class="ArticleTitle">全部文章</div>
        <Spin :show="loading" fix></Spin>
        <div class="ArticleItem" v-for="(item, index) in articleList" :key="index">
          <div class="ArticleItemTitle" @click="router.push('/detail/' + item.id)">
            {{ item.title }}
          </div>
          <div class="ArticleItemContent">
            <Tag v-for="(item,index) in item.tag.split('|')" :key="index" :color="tagTypes[randomNumber()]">{{ item }}
            </Tag>
          </div>
        </div>
        <Page style="padding:15px 20px" :modelValue="pagination.pageNo" :total="pagination.total"
              @on-change="(e) => {pagination.pageNo = e;getList()}"
              show-total show-elevator/>
      </div>
    </div>
    <div class="ArticleRight">
      <div class="whiteBox">
        <div class="title">标签</div>
        <div id="word_img"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ArticleContent {
  display: flex;
  width: fit-content;
  margin: 50px auto;

  .ArticleLeft {
    width: 500px;
    height: fit-content;
    box-shadow: 0px 0px 10px rgba(157, 155, 155, 0.2);
    border-radius: 4px;
    background-color: #fff;
  }

  .ArticleRight {
    width: 300px;
    margin-left: 20px;
    //box-shadow: 0px 0px 10px rgba(157, 155, 155, 0.2);
    border-radius: 4px;

    .whiteBox {
      background-color: #fff;

      > .title {
        padding: 10px 15px;
        font-size: 18px;
      }
    }

    #word_img {
      width: 100%;
      height: 300px;
    }
  }

  .ArticleList {
    width: 100%;
    position: relative;

    > .ArticleTitle {
      width: 100%;
      font-size: 23px;
      line-height: 1;
      padding: 20px;
      border-bottom: 1px solid rgba(157, 155, 155, 0.25)
    }

    .ArticleItem {
      padding: 15px 20px;
      border-bottom: 1px solid rgba(157, 155, 155, 0.15);

      &:hover {
        background-color: rgba(0, 0, 0, 0.02);
      }

      .ArticleItemTitle {
        font-size: 18px;
        cursor: pointer;
        width: fit-content;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;

        &:hover {
          color: #65ad6a;
        }

      }

      .ArticleItemContent {
        font-size: 16px;

      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
